<template>
    <el-container>
        <el-header>
            <el-row>
                <div style="float: right">
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-col :span="9">
                            <el-form-item label="部门名称">
                                <el-input v-model="form.names"></el-input>
                            </el-form-item> </el-col
                        ><el-col :span="15">
                            <el-form-item>
                                <el-button type="primary" @click="GetData()">搜索</el-button>
                                <el-button type="success" @click="handleAdd()">添加</el-button>
                                <el-button type="warning" @click="userOpen()">分配用户</el-button>
                                <el-button type="success" @click="GetData()">所以机构</el-button>
                                <el-button type="danger" @click="Alldelete()">删除</el-button>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </div>
            </el-row>
        </el-header>
        <el-container>
            <el-aside width="200px"
                ><el-tree :data="dataTree" :props="defaultProps" @check-change="handleCheckChange" @click="GetData()"></el-tree>
            </el-aside>
            <el-container>
                <el-main>
                    <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" width="55"> </el-table-column>
                        <el-table-column prop="cascadeId" label="层级Id" width="100"> </el-table-column>
                        <el-table-column prop="name" label="部门名称"> </el-table-column>
                        <el-table-column prop="account" label="用户"> </el-table-column>
                        <el-table-column prop="pName" label="上级部门" width="150"> </el-table-column>
                        <el-table-column prop="status" label="状态" width="120">
                            <template slot-scope="scope">
                                <span v-if="scope.row.status == 0">启用</span>
                                <span v-if="scope.row.status == 1">禁用</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini" type="danger" @click="Delete(scope.$index, scope.row)">删除</el-button>
                                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">禁用</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="form.Pindex"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="form.Psize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                    >
                    </el-pagination>

                    <!-- 显示用户 -->
                    <el-dialog title="显示用户" :visible.sync="dialogVisible" width="50%">
                        <div>
                            <div class="container">
                                <div class="handle-box">
                                    <el-row>
                                        <el-col :span="17"
                                            ><el-input v-model="query.UserName" placeholder="用户名" class="handle-input mr10"></el-input>
                                        </el-col>
                                        <el-col :span="7">
                                            <el-button type="primary" icon="el-icon-search" @click="UserData()">搜索</el-button>
                                            <el-button type="success" style="float: right" icon="el-icon-add" @click="addusers()"
                                                >添加</el-button
                                            >
                                        </el-col>
                                    </el-row>
                                </div>
                                <el-table
                                    :data="tableData1"
                                    border
                                    class="table"
                                    ref="multipleTable"
                                    header-cell-class-name="table-header"
                                    @selection-change="handleSelectionChange1"
                                >
                                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                                    <el-table-column prop="userName" label="用户名"></el-table-column>
                                    <el-table-column prop="userPhone" label="手机号"> </el-table-column>
                                    <el-table-column prop="roles" label="角色" align="center"> </el-table-column>
                                </el-table>
                                <div class="pagination">
                                    <el-pagination
                                        background
                                        layout="total, prev, pager, next"
                                        :current-page="query.pageIndex"
                                        :page-size="query.pageSize"
                                        :total="pageTotal"
                                        @current-change="handlePageChange"
                                    ></el-pagination>
                                </div>
                            </div>
                        </div>
                    </el-dialog>
                    <div>
                        <!-- 添加 -->
                        <el-dialog title="添加" :visible.sync="AddVisible" width="30%">
                            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                                <el-form-item label="部门名称" prop="name">
                                    <el-input v-model="ruleForm.name"></el-input>
                                </el-form-item>
                                <el-form-item label="上级部门" prop="parentId">
                                    <el-select
                                        v-model="ruleForm.parentId"
                                        placeholder="请选择上级部门"
                                        :style="{ width: '100%', height: '100%' }"
                                    >
                                        <el-option
                                            style="height: 50%"
                                            value="00000000-0000-0000-0000-000000000000"
                                            label="根节点"
                                        ></el-option>
                                        <el-option style="height: 50%" value="">
                                            <el-tree
                                                :data="TreeShape"
                                                :props="defaultProps"
                                                show-checkbox
                                                @check-change="handleCheckChange1"
                                            >
                                            </el-tree>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="AddVisible = false">取 消</el-button>
                                <el-button type="primary" @click="Add()">确 定</el-button>
                            </span>
                        </el-dialog>
                    </div>

                    <!-- 修改 -->
                    <div>
                        <el-dialog title="修改" v-if="UpdatVisible" :visible.sync="UpdatVisible" width="30%" :before-close="handleClose">
                            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                                <el-form-item label="部门名称" prop="name">
                                    <el-input v-model="ruleForm.name"></el-input>
                                </el-form-item>
                                <!-- <el-form-item label="上级部门" prop="parentId">
                                    <el-select
                                        v-model="ruleForm.parentId"
                                        placeholder="请选择上级部门"
                                        :style="{ width: '100%', height: '100%' }"
                                    >
                                        <el-option style="height: 50%" value="0" label="根节点"></el-option>
                                        <el-option style="height: 50%" value="">
                                            <el-tree
                                                :data="TreeShape"
                                                :props="defaultProps"
                                                show-checkbox
                                                @check-change="handleCheckChange1"
                                            >
                                            </el-tree>
                                        </el-option>
                                    </el-select>
                                </el-form-item> -->
                            </el-form>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="UpdatVisible = false">取 消</el-button>
                                <el-button type="primary" @click="upt()">确 定</el-button>
                            </span>
                        </el-dialog>
                    </div>
                </el-main>
                <el-footer>Footer</el-footer>
            </el-container>
        </el-container>
    </el-container>
</template>

<script>
import {
    DeleteDepartment,
    getUserList,
    DepartmentList,
    DepartmentAdd,
    DepartmentQuery,
    DepartmentQueryId,
    DepartmentUserAdd,
    AllDeleteDepartment,
    updateDepartment,
    DepartmentUserAdd1
} from '../../api/department.js';
export default {
    data() {
        return {
            tableData: [],
            tableData1: [],
            dataTree: [],
            TreeShape: [],
            multipleSelection: [],
            multipleSelection1: [],
            form: {
                Pindex: 1,
                Psize: 10,
                did: '',
                names: ''
            },
            total: 0,
            ruleForm: {
                name: '',
                parentId: "",
                status: 0
            },
            defaultProps: {
                children: 'dlist',
                label: 'name',
                value: 'depId'
            },
            rules: {},
            query: {
                UserName: '',
                pageIndex: 1,
                pageSize: 10
            },
            pageTotal: 0,
            dialogVisible: false,
            AddVisible: false,
            UpdatVisible: false
        };
    },
    created() {
        this.TreeData();
        this.GetData();
        this.UserData();
    },
    methods: {
        Delete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    DeleteDepartment(row.depId).then((res) => {
                        console.log(res);
                        if (res.code == 200) {
                            this.$message.success('删除成功');
                            this.GetData();
                        }
                    });
                })
                .catch(() => {});
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.UserData();
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleSelectionChange1(val) {
            this.multipleSelection1 = val;
        },
        handleCheckChange(data, checked, indeterminate) {
            console.log(data, checked, indeterminate);
            this.form.did = data.depId;
            console.log('id', this.from.did);
            this.GetData();
        },
        handleAdd() {
            this.permissionTreeOptions = [{ Id: 0, DepartmentName: '根节点', children: this.permissionData }];
            this.AddVisible = true;
        },
        UserData() {
            getUserList(this.query).then((res) => {
                console.log(res);
                this.tableData1 = res.data;
                this.pageTotal = res.Count || 50;
            });
        },
        GetData() {
            DepartmentQuery(this.form).then((res) => {
                console.log('显示', res);
                this.tableData = res.data.pList;
                this.total = res.data.totalCount || 50;
            });
        },
        TreeData() {
            DepartmentList().then((res) => {
                console.log(res);
                this.dataTree = res;
                this.TreeShape = res;
            });
        },
        handleCheckChange1(data, checked, indeterminate) {
            console.log(data, checked, indeterminate);
            this.ruleForm.parentId = data.depId;
        },
        Add() {
            DepartmentAdd(this.ruleForm).then((res) => {
                console.log(res);
                if (res.code == 200) {
                    this.$message.success('添加成功');
                    this.AddVisible = false;
                    this.GetData();
                } else {
                    this.$message.success(res.Message);
                }
            });
        },
        upt() {
            updateDepartment(this.ruleForm).then((res) => {
                console.log(res);
                if (res.code == 200) {
                    this.$message.success('修改成功');
                    this.UpdatVisible = false;
                    this.GetData();
                } else {
                    this.$message.success(res.Message);
                }
            });
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.form.Psize = val;
            this.GetData();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.form.Pindex = val;
            this.GetData();
        },
        handleEdit(index, row) {
            console.log(index, row);
            this.UpdatVisible = true;
            DepartmentQueryId(row.depId).then((res) => {
                console.log('反填数据', res);
                this.ruleForm = res.data;
            });
        },
        userOpen() {
            //判断是否选择用户
            if (this.multipleSelection.length == 1) {
                //选择用户，打开用户弹出框
                this.dialogVisible = true;
                rolelist().then((res) => {
                    this.roleData = res.data;
                });
            } else {
                this.$message.error('请选择用户');
                return;
            }
        },
        handleDelete(index, row) {
            console.log(index, row);
        },
        addusers() {
            //定义数组存储角色编号 1,2
            let rId = [];
            this.multipleSelection1.forEach((x) => {
                rId.push(x.id);
                console.log(rId);
            });
            //定义变量存储用户编号
            var id = '';
            this.multipleSelection.forEach((x) => {
                id = x.depId;
                console.log(id);
            });
            let departmentuser = {
                depId: id,
                id: rId.toString()
            };
            console.log('用户角色添加集合', departmentuser);
            //添加用户角色
            DepartmentUserAdd1(departmentuser).then((res) => {
                console.log(res);
                if (res.code == 200) {
                    this.$message.success('添加成功');
                    this.dialogVisible = false;
                    this.GetData();
                } else {
                    this.$message.warning(res.message);
                }
            });
        },
        Alldelete() {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    AllDeleteDepartment(this.multipleSelection).then((res) => {
                        console.log(res);
                        if (res.code == 200) {
                            this.$message.success('删除成功');
                            this.GetData();
                        }
                    });
                })
                .catch(() => {});
        }
    }
};
</script>